<div style="height: 1000px">This div is for testing scrolled selects.</div>
<button md-button (click)="showSelect=!showSelect">SHOW SELECT</button>
<div class="demo-select">
  <md-card>
    <md-card-subtitle>ngModel</md-card-subtitle>

    <md-select placeholder="Drink" [color]="drinksTheme" [(ngModel)]="currentDrink" [required]="drinksRequired" [disabled]="drinksDisabled"
      [floatPlaceholder]="floatPlaceholder" #drinkControl="ngModel">
      <md-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
        {{ drink.viewValue }}
      </md-option>
    </md-select>
    <p> Value: {{ currentDrink }} </p>
    <p> Touched: {{ drinkControl.touched }} </p>
    <p> Dirty: {{ drinkControl.dirty }} </p>
    <p> Status: {{ drinkControl.control?.status }} </p>
    <p>
      <label for="floating-placeholder">Floating placeholder:</label>
      <select [(ngModel)]="floatPlaceholder" id="floating-placeholder">
        <option value="auto">Auto</option>
        <option value="always">Always</option>
        <option value="never">Never</option>
      </select>
    </p>
    <p>
      <label for="drinks-theme">Theme:</label>
      <select [(ngModel)]="drinksTheme" id="drinks-theme">
        <option *ngFor="let theme of availableThemes" [value]="theme.value">{{ theme.name }}</option>
      </select>
    </p>

    <button md-button (click)="currentDrink='water-2'">SET VALUE</button>
    <button md-button (click)="drinksRequired=!drinksRequired">TOGGLE REQUIRED</button>
    <button md-button (click)="drinksDisabled=!drinksDisabled">TOGGLE DISABLED</button>
    <button md-button (click)="drinkControl.reset()">RESET</button>
  </md-card>

  <md-card>
    <md-card-subtitle>Multiple selection</md-card-subtitle>

    <md-card-content>
      <md-select multiple [color]="pokemonTheme" placeholder="Pokemon" [(ngModel)]="currentPokemon"
        [required]="pokemonRequired" [disabled]="pokemonDisabled" #pokemonControl="ngModel">
        <md-option *ngFor="let creature of pokemon" [value]="creature.value">
          {{ creature.viewValue }}
        </md-option>
      </md-select>
      <p> Value: {{ currentPokemon }} </p>
      <p> Touched: {{ pokemonControl.touched }} </p>
      <p> Dirty: {{ pokemonControl.dirty }} </p>
      <p> Status: {{ pokemonControl.control?.status }} </p>
      <p>
        <label for="pokemon-theme">Theme:</label>
        <select [(ngModel)]="pokemonTheme" id="pokemon-theme">
          <option *ngFor="let theme of availableThemes" [value]="theme.value">{{ theme.name }}</option>
        </select>
      </p>
      <button md-button (click)="setPokemonValue()">SET VALUE</button>
      <button md-button (click)="pokemonRequired=!pokemonRequired">TOGGLE REQUIRED</button>
      <button md-button (click)="pokemonDisabled=!pokemonDisabled">TOGGLE DISABLED</button>
      <button md-button (click)="pokemonControl.reset()">RESET</button>
    </md-card-content>
  </md-card>

  <div *ngIf="showSelect">
    <md-card>
      <md-card-subtitle>formControl</md-card-subtitle>

      <md-card-content>
        <md-select placeholder="Food i would like to eat" [formControl]="foodControl">
          <md-option *ngFor="let food of foods" [value]="food.value"> {{ food.viewValue }}</md-option>
        </md-select>
        <p> Value: {{ foodControl.value }} </p>
        <p> Touched: {{ foodControl.touched }} </p>
        <p> Dirty: {{ foodControl.dirty }} </p>
        <p> Status: {{ foodControl.status }} </p>
        <button md-button (click)="foodControl.setValue('pizza-1')">SET VALUE</button>
        <button md-button (click)="toggleDisabled()">TOGGLE DISABLED</button>
        <button md-button (click)="foodControl.reset()">RESET</button>
      </md-card-content>
    </md-card>
  </div>

  <div *ngIf="showSelect">
    <md-card>
      <md-card-subtitle>Change event</md-card-subtitle>

      <md-card-content>
        <md-select placeholder="Starter Pokemon" (change)="latestChangeEvent = $event">
          <md-option *ngFor="let creature of pokemon" [value]="creature.value">{{ creature.viewValue }}</md-option>
        </md-select>

        <p> Change event value: {{ latestChangeEvent?.value }} </p>
      </md-card-content>
    </md-card>
  </div>

</div>
<div style="height: 500px">This div is for testing scrolled selects.</div>
